<template>
 <view>
  <!-- 第一部分 -->
  <view class="items">
   <view class="item">
    <view class="item-xs">推荐</view>
    <view class="item-x">千里眼</view>
    <view class="item-x">搞笑</view>
    <view class="item-x">娱乐</view>
    <view class="item-x">社会</view>
    <view class="item-x">音乐</view>
    <view class="item-x">科技</view>
   </view>
   
  </view>
  <view class="item-ss"></view>
  <!-- 第二部分视频-视频 -->
  <view class="sp">
   <navigator url="../videocontent/videocontent">
    <view class="x">
     600斤公牛不甘心被杀，宁愿跳进大海之中，结局令人遗憾
    </view>
   </navigator>
   <video class="y" style="width: 100%;height: 400rpx;" src="../../../static/xiangwo.mp4"></video>
   <view class="dibu">
    <view class="wenzi">
     <view class="wenzizf">
      <image   style="width: 45rpx;height: 45rpx;"src="../../../static/1.png" mode=""></image>
       </view>
       <view class="wenzizf" style="font-size: 32rpx;">开心哈哈大笑</view>
       <view class="wenzizf" style="color: #999999;margin-top: 0rpx;">1</view>
       <view class="wenzizf" style="font-size: 32rpx;color: #dd524d;font-weight: bold;">关注</view> 
     
    </view>
    <view class="tupian">
     <view class="tupiandx">
      <image  style="width: 35rpx;height: 35rpx;"src="../../../static/1.png" mode=""></image>
      
     </view>
     <view class="tupiandx">
      <image  style="width: 35rpx;height: 35rpx;"src="../../../static/1.png" mode=""></image>
      
     </view>
     <view class="tupiandx"style="margin-top: -10rpx;padding-right: 20rpx;">...
      
      
     </view>
    </view>
   </view>
   
   <!-- 第二部分视频 2-->
   <view class="sp">
    <navigator url="../videocontent/videocontent">
     <view class="x">这些箱子里装的中高档香烟共有1350条、27万余支
      
     </view>
    </navigator>
      <video class="y" style="width: 100%;height: 400rpx;" scr="../../../static/xiangwo.mp4"></video>
	  <view class="wenzi">
	  	 <view class="wenzizf">
	  	 	<image style="width: 45rpx; height: 45rpx;" src="../../../static/1.png"></image>
	  	 </view>
		 <view class="wenzizf" style="font-size: 32rpx">往事随风去......</view>
		 <view class="wenzizf" style="color: #999999; margin-top: 0rpx; font-weight: bold;">关注</view>
	  </view>
	  <view class="tupian">
	  	<view class="tupiandx">
	  		<image style="width: 35rpx; height: 35rpx;" src="../../../static/2.png"></image>
	  	</view>
		<view class="tupiandx">
			<image style="width: 35rpx; height: 35rpx;" src="../../../static/3.png"></image>
		</view>
		<view class="tupiandx" style="margin-top: -10rpx; padding-right: 20rpx;">
			....
		</view>
	  </view>
   </view>
   
  </view>
  
  <!-- 第三部分-->
  <view class="sp">
  	  <navigator url="../news/news.vue">
		  <view class="x">一个“背包客”，从郑州坐火车往返江南某市......</view>
	  </navigator>
	  <video class="y" style="width: 100%; height: 400rpx;" src="../../../static/xiangwo.mp4"></video>
	  <view class="dibu">
	  	<view class="wenzi">
	  		<view class="wenzizf">
	  			<image style="width: 45rpx; height: 45rpx;" src="../../../static/3.png"></image>
	  		</view>
			<view class="wenzizf" style="font-size: 32rpx;">微笑面对一切....</view>
			<view class="wenzizf" style="color: #999999; margin-top: 0rpx;">|</view>
			<view class="wenzizf" style="font-size: 32rpx;color: #dd524d; font-weight: bold;">关注</view>
	  	</view>
		<view class="tupian">
			<view class="tupiandx">
				<image style="width: 35rpx;height: 35rpx;" src="../../../static/4.png"></image>
			</view>
			<view class="tupiandx">
				<image style="width: 35rpx;height: 35rpx;" src="../../../static/5.png"></image>
			</view>
			<view class="tupiandx" style="margin-top: -10rpx;padding-right: 20rpx;">...</view>
		</view>
	  </view>
  </view>
  
  <!-- 第四部分-->
   <view class="sp">
         <navigator url="../videocontent/videocontent">
          <view class="x">
           原来，4月24日，该局执法人员奔赴江南某是，在江南某市火车站
          </view>
         </navigator>
		 <video class="y" style="width: 100%;height: 400rpx;" src="../../../static/xiangwo.mp4"></video>
         <view class="dibu">
         	<view class="wenzi">
         		<view class="wenzizf">
         			<image style="width: 45rpx; height: 45rpx;" src="../../../static/4.png"></image>
         		</view>
				<view class="wenzizf" style="font-size: 32rpx;">每天开开心心...</view>
				 <view class="wenzizf" style="color: #999999; margin-top: 0rpx;">|</view>
				<view class="wenzizf" style="font-size: 32rpx;color: #dd524d;font-weight: bold;">关注</view>
         	</view>
			<view class="tupian">
				<view class="tupiandx">
					<image style="width: 35rpx;height: 35rpx;" src="../../../static/6.png"></image>
				</view>
				<view class="tupiandx">
					<image style="width: 35rpx;height: 35rpx;" src="../../../static/7.png"></image>
				</view>
				<view class="tupiandx" style="margin-top: -10rpx;padding-right: 20rpx;">...</view>
			</view>
         </view>
        </view>
    
	   
	   <!-- 视频5-->
	   <view class="sp">
	   	 <navigator url="../news/news.vue">
			 <view class="x">新郑市烟草与公安部门顺藤摸瓜，连夜驱车奔赴江南某市</view>
		 </navigator>
		 <video class="y" style="width: 100%;height: 400rpx;" src="../../../static/xiangwo.mp4"></video>
		 <view class="dibu">
		 	<view class="wenzi">
		 		<view class="wenzizf">
		 			<image style="width: 45rpx;height: 45rpx;" src="../../../static/7.png" mode=""></image>
		 		</view>
				<view class="wenzizf" style="font-size: 32rpx;">一起来玩耍吧...</view>
				<view class="wenzizf" style="color: #999999;margin-top: 0rpx;">|</view>
				<view class="wenzizf" style="font-size: 32rpx;color: #dd524d;font-weight: bold;">关注</view>
		 	</view>
			<view class="tupian">
				<view class="tupiandx">
					<image style="width: 35rpx;height: 35rpx;"src="../../../static/7.png" mode=""></image>
				</view>
				<view class="tupiandx">
					<image style="width: 35rpx;height: 35rpx;"src="../../../static/7.png" mode=""></image>
				</view>
				<view class="tupiandx" style="margin-top: -10rpx;padding-right: 20rpx;">...</view>
			</view>
		 </view>
	   </view>
	   
 </view>
</template>

<script>
 export default {
  data() {
   return {
    
   }
  },
  methods: {
   
  }
 }
</script>

<style>
   .items{
	   background-color: #ffffff;
	   position: fixed;
	   z-index: 1;
	   width: 100%;
	   top:90rpx
   }
   .item {
	   background-color: #ffffff;
	   display: flex;
	   flex-direction: row;
	   margin: 5rpx 10rpx 20rpx 10rpx;
	   font-size: 40rpx;
	   color: #333333;
	   margin-bottom: 20rpx;
   }
   .item-ss{
	   width: 100%;
	   height: 60rpx;
   }
   
   /* 选项卡*/
   .tab_title view{
	   display: inline-block;
	   margin-left: 30rpx;
	   line-height: 30rpx;
	   color: #ffffff;
   }
   .dibu {
	   display: flex;
	   flex-direction: row;
	   justify-content: space-between;
	   -webkit-justify-conten: space-between;
	   margin-top: 30rpx;
	   margin-bottom: 20rpx;
   }
   .wenzi {
	   display: flex;
	   flex-direction: row;
   }
   .tupian {
	   display: flex;
	   flex-direction: row;
   }
   .tupiandx {
	   margin-left: 60rpx;
   }
   .wenzizf {
	   margin-right: 20rpx;
   }
   .x{
	   margin-top: 30rpx;
	   margin-bottom: 30rpx;
   }
   .item-xs {
	   color: #dd524d;
	   font-weight: bold;
   }
   .a {
	   margin-right: 120rpx;
	   height: 50rpx;
   }
   .ap image {
	   width: 250rpx;
	   height: 100rpx;
   }
   .ap {
	   border-radius: 10rpx;
	   width: 250rpx;
	   height: 100rpx;
	   overflow: hidden;
	   margin: auto;
   }
   .scroll_x {
	   height: 50rpx;
	   width: 100%;
	   white-space: nowrap;
   }
   .item {
	   display: flex;
	   flex-direction: row;
	   justify-content: space-between;
	   color: #333333;
	   background-color: #ffffff;
	   border-bottom: 1rpx solid #c8c7cc;
   }
   .tab_title {
	   display: inline-block;
	   margin-left: 10rpx;
	   height: 80rpx;
	   line-height: 70rpx;
	   color: #333333;
	   background-color: #ffffff;
	   border-bottom: 1rpx solid #c8c7cc;
   }
   .tab-x {
	   color: #333333;
	   background-color: #ffffff;
   }
   .scroll_x {
	   height: 60rpx;
	   width: 100%;
	   white-space: nowrap;
   }
   .gray {
	   color: #c8c7cc;
   }
   .gray1 {
	   color: #dd524d;
   }
   .hd {
	   display: inline-block;
   }
   .tab {
	   background-color: #dd524d;
   }
   .shgd {
	   position: fixed;
	   position: absolute;
	   z-index: 1;
   }
   
   /* 隐藏导航条*/
   scroll-view::-webkit-scrollbar {
	   display: none;
	   width: 0;
	   height: 0;
	   color: transparent;
   }
   .sp {
	   border-bottom: 1rpx solid #e5eaf3;
	   margin: 10rpx 10rpx 20rpx 20rpx;
   }
   .reg-right {
	   color: #dd524d;
	   margin-right: 10rpx;
	   padding-left: 10rpx;
   }
   .z {
	   display: flex;
	   flex-direction: row;
	   justify-content: space-between;
	   margin-bottom: 30rpx;
	   margin-top: 20rpx;
	   height: 70rpx;
   }
   .zs {
	   display: flex;
   }
   .z1 {
	   margin-bottom: 10rpx;
	   margin-right: 300rpx;
	   margin-top: 20rpx;
   }
   .z-h {
	   height: 60rpx;
	   margin-right: 10rpx;
	   display: flex;
	   flex-direction: row;
	   font-size: 35rpx;
   }
   .z-z {
	   font-size: 30rpx;
	   color: #c8c7cc;
   }
   .z-z1 {
	   font-size: 30rpx;
	   color: #c8c7cc;
	   margin: 20rpx;
   }
   .z-z2 {
	   font-size: 30rpx;
	   color: #c8c7cc;
	   margin: 20rpx;
   }
   .y {
	   margin: 0rpx;
	   flex: 1;
   }
</style>